<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Highcharts Example</title>

    <script type="text/javascript" src="../../js/jquery-1.8.2.min.js"></script>
    <style type="text/css">
        ${demo.css}
    </style>
    <script type="text/javascript">
        $(function () {

            /**
             * Get the current time
             */
            function getNow() {
                var now = new Date();

                return {
                    hours: now.getHours() + now.getMinutes() / 60,
                    minutes: now.getMinutes() * 12 / 60 + now.getSeconds() * 12 / 3600,
                    seconds: now.getSeconds() * 12 / 60
                };
            }

            /**
             * Pad numbers
             */
            function pad(number, length) {
                // Create an array of the remaining length + 1 and join it with 0's
                return new Array((length || 2) + 1 - String(number).length).join(0) + number;
            }

            var now = getNow();

            // Create the chart
            $('#container').highcharts({

                    chart: {
                        type: 'gauge',
                        plotBackgroundColor: null,
                        plotBackgroundImage: null,
                        plotBorderWidth: 0,
                        plotShadow: false,
                        height: 200
                    },

                    credits: {
                        enabled: false
                    },

                    title: {
                        text: 'The Highcharts clock'
                    },

                    pane: {
                        background: [{
                            // default background
                        }, {
                            // reflex for supported browsers
                            backgroundColor: Highcharts.svg ? {
                                radialGradient: {
                                    cx: 0.5,
                                    cy: -0.4,
                                    r: 1.9
                                },
                                stops: [
                                    [0.5, 'rgba(255, 255, 255, 0.2)'],
                                    [0.5, 'rgba(200, 200, 200, 0.2)']
                                ]
                            } : null
                        }]
                    },

                    yAxis: {
                        labels: {
                            distance: -20
                        },
                        min: 0,
                        max: 12,
                        lineWidth: 0,
                        showFirstLabel: false,

                        minorTickInterval: 'auto',
                        minorTickWidth: 1,
                        minorTickLength: 5,
                        minorTickPosition: 'inside',
                        minorGridLineWidth: 0,
                        minorTickColor: '#666',

                        tickInterval: 1,
                        tickWidth: 2,
                        tickPosition: 'inside',
                        tickLength: 10,
                        tickColor: '#666',
                        title: {
                            text: 'Powered by<br/>Highcharts',
                            style: {
                                color: '#BBB',
                                fontWeight: 'normal',
                                fontSize: '8px',
                                lineHeight: '10px'
                            },
                            y: 10
                        }
                    },

                    tooltip: {
                        formatter: function () {
                            return this.series.chart.tooltipText;
                        }
                    },

                    series: [{
                        data: [{
                            id: 'hour',
                            y: now.hours,
                            dial: {
                                radius: '60%',
                                baseWidth: 4,
                                baseLength: '95%',
                                rearLength: 0
                            }
                        }, {
                            id: 'minute',
                            y: now.minutes,
                            dial: {
                                baseLength: '95%',
                                rearLength: 0
                            }
                        }, {
                            id: 'second',
                            y: now.seconds,
                            dial: {
                                radius: '100%',
                                baseWidth: 1,
                                rearLength: '20%'
                            }
                        }],
                        animation: false,
                        dataLabels: {
                            enabled: false
                        }
                    }]
                },

                // Move
                function (chart) {
                    setInterval(function () {

                        now = getNow();

                        var hour = chart.get('hour'),
                            minute = chart.get('minute'),
                            second = chart.get('second'),
                            // run animation unless we're wrapping around from 59 to 0
                            animation = now.seconds === 0 ?
                                false :
                                {
                                    easing: 'easeOutElastic'
                                };

                        // Cache the tooltip text
                        chart.tooltipText =
                            pad(Math.floor(now.hours), 2) + ':' +
                            pad(Math.floor(now.minutes * 5), 2) + ':' +
                            pad(now.seconds * 5, 2);

                        hour.update(now.hours, true, animation);
                        minute.update(now.minutes, true, animation);
                        second.update(now.seconds, true, animation);

                    }, 1000);

                });
        });

        // Extend jQuery with some easing (copied from jQuery UI)
        $.extend($.easing, {
            easeOutElastic: function (x, t, b, c, d) {
                var s = 1.70158;
                var p = 0;
                var a = c;
                if (t == 0) return b;
                if ((t /= d) == 1) return b + c;
                if (!p) p = d * .3;
                if (a < Math.abs(c)) {
                    a = c;
                    var s = p / 4;
                }
                else var s = p / (2 * Math.PI) * Math.asin(c / a);
                return a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b;
            }
        });
    </script>
</head>
<body>
<script src="../../js/highcharts.js"></script>
<script src="../../js/highcharts-more.js"></script>

<div id="container" style="width: 300px; height: 300px; margin: 0 auto"></div>

</body>
</html>
